<template>
    <div class="auto-1629119329304 m-layer z-show m-layer-w5" :style="{top:TOP, left: '410.5px'}" ref="pay_box" v-if="isshow">
        <div class="zbar" @mousedown.stop="move">
          <div class="zttl f-thide">提示</div>
        </div>
        <div class="zcnt">
           <div>
               <div class="lyct f-tc">
                 <div class="f-cb m-tipinfo">
                    <i class="u-icn2 u-icn2-11 f-fl"></i>
                    <div class="f-fr f-pr f-fs1 tip">版权方要求，当前专辑需单独付费，购买数字专辑即可无限畅享</div>
                 </div>
               </div>
               <div class="lsbtn f-tc">
                   <a href="javascript:;" class="u-btn2 u-btn2-2 u-btn2-2-h "><i>立即订购</i></a>
                   <a href="javascript:;" class="u-btn2 u-btn2-2 u-btn2-1-h "><i>以后再说</i></a>
               </div>
               <span class="zcls" title="关闭窗体" id="auto-id-e5BfFxWSGlXZfCm0" @click="isshow = false">×</span>
           </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isshow:false,
            TOP:''
        }
    },
   methods:{
       move(e) {
      //拖动整个收藏栏
      var x = e.pageX - this.$refs.pay_box.offsetLeft;
      var y = e.pageY - this.$refs.pay_box.offsetTop;
      var _this = this;
      document.addEventListener("mousemove", Boxmove);
      function Boxmove(e) {
        _this.$refs.pay_box.style.left = e.pageX - x + "px";
        _this.$refs.pay_box.style.top = e.pageY - y + "px";
      }
      document.addEventListener("mouseup", function () {
        document.removeEventListener("mousemove", Boxmove);
      });
    },
    show(Y){
       this.TOP =( Y- 250/2) +'px'
       this.isshow = true
    }
   }
}
</script>
<style scoped>
div.m-layer-w5 {
    width: 442px;
}
div.m-layer {
    position: absolute;
    z-index: 99;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
    background: #fff;
}
div.m-layer .zbar {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
    background: #2d2d2d;
    cursor: move;
    line-height: 30px;
}
div.m-layer .zttl {
    padding-right: 45px;
    margin: 0;
    height: 38px;
    line-height: 38px;
    padding-left: 18px;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
}
div.m-layer div.zcnt {
    padding: 0;
    border: 1px solid #878787;
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
    background: #fff;
}
div.m-layer .lyct {
    padding: 40px 0;
}
.f-tc {
    text-align: center;
}
.m-tipinfo {
    padding: 15px 40px;
}
.u-icn2 {
    background: url("../../assets/imgs/icon2.png") no-repeat 0 9999px;
}
.u-icn2-11 {
    width: 40px;
    height: 40px;
    background-position: -78px -45px;
}
.u-icn, .u-icn2, .u-icn3 {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

.f-fl {
    float: left;
}

.m-tipinfo .tip {
    width: 300px;
    line-height: 22px;
    text-align: left;
}
.f-cb::after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}
.f-fs1 {
    font-size: 14px;
}
.f-fr {
    float: right;
}
div.m-layer .lsbtn {
    padding: 10px 0;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #c6c6c6;
    background-color: #f7f7f7;
}
div.m-layer .lybtn a, div.m-layer .lsbtn a {
    margin: 0 10px;
}
.u-btn2-1-h, .u-btn2-1-h i, .u-btn2-2-h, .u-btn2-2-h i {
    height: 35px;
    line-height: 34px;
}
.u-btn2-2 {
    color: #fff;
    font-size: 12px;
}
.u-btn2, .u-btn2 i{
    background: url("../../assets/imgs/button2.png") no-repeat;
}

.u-btn2, .u-btn2 i {
    display: inline-block;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
}
.u-btn2-2-h {
    background-position: right -1690px;
}
.u-btn2 {
    padding: 0 5px 0 0;
    white-space: nowrap;
}
.u-btn2-2-h i {
    background-position: 0 -1650px;
}
.u-btn2 i {
    padding: 0 15px 0 20px;
    pointer-events: none;
}
.u-btn2-1-h {
    background-position: right -1850px;
}
.u-btn2-1-h i {
    background-position: 0 -1810px;
}
.u-btn2-1-h  i {
    color: #333;
}
div.m-layer .zcls {
    position: absolute;
    z-index: 20;
    top: 16px;
    right: 20px;
    width: 10px;
    height: 10px;
    overflow: hidden;
    text-indent: -9999px;
    cursor: pointer;
    background: url("https://s2.music.126.net/style/web2/img/layer/layer.png?cb0e6d70e2ee83d68134d7a5dda5101e") no-repeat;
    background-position: 0 -95px;
}
</style>